<template>
	<view class="param">
		<p-navbar title="参数"></p-navbar>
		<view class="finish">
			<view class="finish-item" v-for="(item,index) in finish" :key="index" :class="{'show':$state.sybom.sybom==index}" @tap="sysbom(index)">
				{{item}}
			</view>
		</view>
		<!-- 选择币种 -->
		<view class="param-title" @tap="$Router.back(1)" v-if="JSON.stringify(radio)=='{}'">
			<view class="param-flex1">{{cases(type.baseCurrency)}}<text>/{{cases(type.quoteCurrency)}}</text></view>
			<view class="param-flex2">
				<view class="flex2 color-falls" :class="{'color-rise':tage(type.priceLimit)>=0}">
					<view class="item1">{{pinter(type.newPrice)}}</view>
					<view class="item2">({{tage(type.priceLimit)}}%)</view>
				</view>
				<image  src="../../static/icon-back-white.png" mode=""></image>
			</view>
		</view>
		<!-- 自定义 -->
		<view >
			<view class="form" v-for="(item,index) in props" :key="index">
				<view class="form-title">
					<view class="">{{item.name}}</view>
					<view class="" v-if="item.name=='首单金额'">总需消耗{{total || 0}}(U)</view>
				</view>
				<view class="form-center" @tap="getname(item.name)">
					<input type="text"  :placeholder="'请输入'+item.name"   @blur="blur(item.key,'form')" v-model="form[item.key]" :disabled="item.name=='补仓比例' || ($state.sybom.sybom!=0 && !item.disabled)?true:false" />
					<view class="bill" v-if="item.name!='做单数量' && item.name!='首单倍投'">
						<image v-if="item.name=='补仓比例'" class="bill-image" src="../../static/icon-back-black.png" mode=""></image>
						{{item.name!='首单金额'?'| %':'USDT'}}
					</view>
				</view>
			</view>
			<!-- 下单按钮 -->
			<view class="submit">
				<u-button type="primary" ripple shape="circle" :disabled="disabled" :loading="loading" @click="fnRegister">确 定</u-button>
			</view>
		</view>
		<!-- 补仓模态框 -->
		<u-popup v-model="show" mode="bottom" class="popup">
			<view class="modal-title">
				<view>补仓比例</view>
				<view class="title1" @tap="show=false">取消</view>
			</view>
			<scroll-view class="scroll-y" scroll-y="true">
				<view v-for="(item,index) in menu" class="scroll-flex">
					<view class="flex-grouy1">
						{{item.name}}
					</view>
					<view class="flex-grouy2">
						<input type="text" placeholder="请输入补仓比例" @blur="blur(item.key,'proce')" v-model.trim="proce[item.key]" :disabled="type.currentBuyCount-2>=index || $state.sybom.sybom!=0?true:false"/> %
					</view>
				</view>
			</scroll-view>
			<!-- 稳定激进保守不显示按钮 -->
			<view class="submit" style="margin: 0rpx 50rpx;padding-bottom: 10rpx;" v-if="$state.sybom.sybom==0">
				<u-button type="primary" ripple shape="circle" :loading="loading" @click="updateFun">确 定</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {event} from './details.js'
	export default {
		data() {
			return {
				total:0,//所需消耗U
				event:event,
				finish:['自定义','稳健','激进','保守'],
				menu: [],
				show: false, //模态框
				loading: false, // 注册加载中
				propitem:{
						key: 'Double',
						name: '首单倍投',
						disabled:true
					},
				props: [
					{
						key: 'amount',
						name: '首单金额',
					},
					{
						key: 'maxBuyOrderNum',
						name: '做单数量'
					},
					{
						key: 'stopProfitRatio',
						name: '止盈比例',
						start: '1'
					},
					{
						key: 'stopProfitCallbackRatio',
						name: '止盈回调',
						start: '1'
					},
					{
						key: 'supplyRatio',
						name: '补仓比例',
						start: '1'
					},
					{
						key: 'supplyCallbackRatio',
						name: '补仓回调',
						start: '1'
					}
				],
				form: {},
				proce: {},
				type: {}, //接收参数
				radio:{},//补仓单数修改
				comptent:[],//获取所有类型的参数
			};
		},
		computed: {
			// 注册按钮是否禁止点击
			disabled() {
				for (let i = 0; i < this.mustNode.length; i++) {
					const ele = this.mustNode[i]
					if (!this.form[ele.key]) return true
				}
				return false;
			},
			// 必填的节点信息
			mustNode() {
				return this.props
			},
			cases() { //转大写
				return t => t.toUpperCase();
			},
			pinter() { 
				return t => {
					if(!t) return '0.0000'
					let data=this.util.decimal(t)
					if(data=='0.0000'){//shib 这种小币种 都是5位小数点
					 return this.util.decimal(t,8)
					}else{
					 return data;
					}
				}
			},
			tage() { //乘于100带小数点
				return t => {
					if (!t) return '0.00'
					let data = Number(t * 100).toFixed(2)
					return data
				}
			},
			tages() { //乘于100
				return t => {
					if (!t) return '0.00'
					let data = Number(t * 100)
					return Number(data.toString().match(/^\d+(?:\.\d{0,4})?/))
				}
			},
			num() { //除于100
				return t => {
					if (!t) return '0'
					let data = Number(t / 100)
					return  parseFloat((data).toPrecision(12)) // = 7  
				}
			},
			userinfo(){//用户信息
				return this.$state.userinfo
			},
		},
		watch:{
		   form:{
		    handler(newVal){//所需消耗-算法
		      let data=0
		      for(let i=0;i<newVal.maxBuyOrderNum;i++){
		       data+=data || Number(newVal.amount)
		      }
		      this.total=(data*2)-newVal.amount<=0?0:(data*2)-newVal.amount
		    },
		    deep:true
		   },
		  },
		onLoad() {
			this.$store.dispatch('getUser') //获取用户本地资产
			this.type = JSON.parse(this.$Route.query.type)//策略参数
			if(this.$Route.query.procp){
				this.radio=JSON.parse(this.$Route.query.procp)//补单参数
				this.proce=this.radio
			}
			this.request('symbolConfig/list').then(async res=>{//接口带来首次订单参数
			     this.comptent=res.data.data
				 if(!this.$Route.query.procp){//初始化
				      this.value(res.data.data[0],0)
				 }else{//修改
				 	this.value(this.type,1)
				 }
			})
		},
		methods: {
			sysbom(index){//切换
			if(JSON.stringify(this.radio)!='{}' && index!='0') return this.util.toast('禁止在修改中切换其他其他类型')
				this.$state.sybom.sybom=index//获取下标
				let sysvalue=JSON.parse(this.comptent[index].supplyRatio)
				let obj={}
				for(let i=0;i<sysvalue.length;i++){//稳定激进保守补仓比例
					obj[sysvalue[i].orderIndex]=parseFloat((sysvalue[i].bigDecimal*100).toPrecision(12))
				}
				this.value(this.comptent[index],0)//开单数量进行*100
				if(this.$state.sybom.sybom!=0){
					this.$set(this.form,'Double',500)//倍投数量
					if(this.props.length==7) return ;
					this.props.unshift(this.propitem)//添加首单倍投	
				}else{
					this.props.splice(0,1)
				}
				this.proce=obj
			},
			value(item,e){//onload 计数参数
				let form = {}
				for (let i = 0; i < this.props.length; i++){//执行列表带来修改的参数
					if (this.props[i].start == '1') {//比例回调*100
						form[this.props[i].key] = this.tages(item[this.props[i].key])
					} else {
						form[this.props[i].key] = item[this.props[i].key]
					}
				}
				if(e==0){//创建
					 form.terraceId = this.$state.terraceId.terraceId //平台id
					 form.symbol = this.type.symbolName//交易对
					 form.userId = uni.getStorageSync('Login').id //用户id
					 form.supplyRatio=this.proce['1'] || 3;//非自定义取proce 自定义默认取三
					 if(this.form.Double){//首单倍投是前端自己加的
						 form.Double=this.form.Double
					 }
					 this.form = form
				}else{//修改
					form.id=this.type.id//订单编号
					form.userId = uni.getStorageSync('Login').id //用户id
					form.supplyRatio=this.proce[this.type.currentBuyCount-1 || 1]//修改获取最新补仓
					this.form = form
				}
			},
			blur(key, value) { //补仓数调整
				if (value == 'form') { //首单参数
					this.$set(this.form, key, Math.abs(this.form[key]))
				} else { //补单参数
				    if(this.form.supplyCallbackRatio>=Math.abs(this.proce[key])){
						return this.util.toast('补仓比例必须大于补仓回调')
					}
					this.$set(this.proce, key, Math.abs(this.proce[key]))
				}
			},
			updateFun() { //补仓设置成功
			    for(let i=1;i<this.menu.length+1;i++){
					if(!this.proce[i] ){
					    return 	this.util.toast('补单不能为空')
					}else if(this.form.supplyCallbackRatio>=Math.abs(this.proce[i])){//防止输入小于后 未离开焦点点按钮
					    return 	this.util.toast('补仓比例必须大于补仓回调')
					}
				}
				this.util.toast('设置成功')
				this.form.supplyRatio=this.proce[this.type.currentBuyCount || 1]//修改获取最新补仓
				this.show = false
			},
			hol(){//确定点击调用 判断
				if(this.userinfo.userGrade.memberGradeId=='0'){//获取用户等级 判断有没有开通会员
					this.util.toast('该账户尚未激活')
					return false
				}else{
					return true
				}
			},
			map(item){
				let data=this.form.amount
				for(let i=1;i<item;i++){
					data+=data
				}
				return data
			},
			fnRegister() { //下单
				// if(!this.hol()) return ;//是否激活
				let ratio = []
				let dou={}
				if(this.$state.sybom.sybom!=0 && JSON.stringify(this.radio)=='{}'){//稳健 激进 保守 
					this.value(this.comptent[this.$state.sybom.sybom],0)
					if(this.form.Double%500!=0){
						return this.util.toast('首单倍投有误,以500倍数输入')
					}
					dou.amount=this.map(Number(this.form.Double/500))//倍投算法
				}
				if (this.form.maxBuyOrderNum != this.menu.length + 1) { //单数修改补单更新(修改了单数未修改补仓比例)
					this.menu = [] //重新获取
					this.pull()
				}
				for (let i = 0; i < this.menu.length; i++) {//补仓比例转格式
					let data = {
						"orderIndex": Number(i + 1),
						"bigDecimal": this.num(this.proce[this.menu[i].key])
					}
					ratio.push(data)
				}
				let value=this.jis();//参数计算返回
				let methods = JSON.stringify(this.radio)=='{}' ? 'order/create' : 'order/update'
				this.loading = true
				let sybom=this.$state.sybom.sybom//1自定义 2 稳健 3 激进 4 保守
				this.request(methods, {
					...this.form,//参数
					...value,//参数
					...dou,//稳定基金的首单金额
					supplyRatio: JSON.stringify(ratio),//补仓比例
					symbolConfig:Number(sybom+1)//1自定义 2 稳健 3 激进 4 保守
				}).then(res => {
					if (res.data.code == 1) {
						let toast = this.type.id ? '添加成功' : '修改成功'
						this.util.toast(toast, 'success')
						setTimeout(() => {
							this.$Router.replace({
								path: '/pages/transaction/transaction',
								query:{type:JSON.stringify(1)}
							})
						}, 1500)
					}
					this.loading = false
				})
			},
			jis() { //计算
				let form = {}
				for (let i = 0; i < this.props.length; i++) {
					if (this.props[i].start == '1') {
						form[this.props[i].key] = parseFloat((this.form[this.props[i].key]/100).toPrecision(12))
					} else {
						form[this.props[i].key] = this.form[this.props[i].key]
					}
					if(form[this.props[i].key]<0.0001){
						this.util.toast('比例或回调不能小于0.01')
						return ;
					}
				}
				return form
			},
			getname(name) { //修改补仓跌幅
				if (name == '补仓比例') {
					this.menu = [] //重新获取
					this.show = true
					this.pull()
				}
			},
			pull() { //添加补单数
				let length = this.form.maxBuyOrderNum
				let datatype = null; //获取最后一个值给新加数据
				let proce = {} //初始化
				for (let i = 0; i < length - 1; i++) {
					let array = {
						key: `${this.menu.length+1}`,
						name: `第${this.menu.length+1}次补仓`,
						show: false,
					}
					if (JSON.stringify(this.radio)!='{}') { //修改参数
						if (this.proce[array.key] != undefined || this.proce[array.key]) { //原本得数据
							datatype = this.proce[array.key]
						} else { //新加数据
							this.proce[array.key] = datatype || 0
						}
					} else { //初始化
						let huangyaun = this.proce //输入后再次点开
						if (array.key == '1') { //第一个
							proce[array.key] = this.proce[array.key] || 3
						} else if (array.key == '2') { //第2个
							proce[array.key] = this.proce[array.key] || 4
						} else {//第N个
							proce[array.key] = this.proce[array.key] || 7 
						}
					}
					this.menu.push(array)
				}
				if(JSON.stringify(this.radio)=='{}'){//初始化
				    this.proce = proce	
				}
			},
		}
	}
</script>

<style lang="scss">
	.param {
		padding: 40rpx;
	}
	.form-title {
		line-height: 60rpx;
		margin-top: 15rpx;
		@include flex;
		justify-content: space-between;
		padding-right: 20rpx;
		image {
			width: 25rpx;
			height: 25rpx;
			margin-left: 10rpx;
		}
	}

	.form-center {
		@include flex;
		width: 100%;
		justify-content: space-between;
		background-color: $color-bg;
		line-height: 85rpx;
		border-radius: 16rpx;
		padding: 0rpx 40rpx;

		input {
			width: 85%;
			height: 80rpx;
		}

		.bill {
			width: 15%;
			text-align: right;
			// @include flex;
			.bill-image{
				width: 17rpx;
				height: 27rpx;
				top: 7rpx;
				margin-right: 25rpx;
				transform:rotate(-90deg);
			}
		}
	}
	.fixed{
		margin: 60% 0rpx 50rpx !important;
	}
	.submit {
		margin: 50rpx 0rpx 50rpx;
		/deep/ .u-btn {
			background-color: $light-color;
			transition: .3s;
			height: 90rpx;
			border-radius: 20rpx;

			&[disabled] {
				box-shadow: none !important;
				background-color: #D7D7D7 !important;
			}
		}

		/deep/ .u-round-circle::after {
			border-radius: 20rpx;
		}
	}
	.bt-item{
	  text-align: center;
	  background-color: $light-color;
	  line-height: 90rpx;
	  border-radius: 20rpx;
	  color: #FFFFFF;
	  font-size: 30rpx !important;
	 }

	.popup {

		/deep/ .uni-scroll-view-content {
			width: 100%;
			height: 100%;
			background-color: $color-bgs;
			text-align: center;
			line-height: 80rpx;
			padding: 20rpx 0rpx 0rpx;
		}

		.popup-border {
			border-bottom: 1rpx solid $border;
		}
	}

	.modal-title {
		display: flex;
		justify-content: space-between;
		padding: 10rpx 10rpx 20rpx;
	}

	.scroll-y {
		height: 500rpx;
		width: 90%;
		border: 1px solid rgba(#e0e0e0, 0.5);
		border-radius: 15rpx;
		padding: 15rpx 34rpx;
		margin-bottom: 20rpx;

		.scroll-flex {
			display: flex;
			width: 100%;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid rgba(#e0e0e0, 0.5);
			line-height: 90rpx;

			.flex-grouy2 {
				display: flex;
				align-items: center;

				input {
					font-size: 26rpx;
					text-align: right;
					padding-right: 50rpx;
				}
			}
		}
	}

	.param-title {
		@include flex;
		justify-content: space-between;
		background-color: $color-bgs;
		padding: 20rpx 30rpx;
		border-radius: 20rpx;

		.param-flex1 {
			font-size: 32rpx;

			text {
				font-size: 24rpx;
				color: $color-fu;
			}
		}

		.param-flex2 {
			@include flex;
			.color-falls{
				color: $color-fall ;//卖出红
			}
			image {
				width: 12rpx;
				height: 20rpx;
				transform: rotate(180deg);
			}

			.item1 {
				font-size: 28rpx;
				font-weight: bold;
				margin-right: 20rpx;
				line-height: 40rpx;
			}

			.item2 {
				font-size: 25rpx;
				line-height: 40rpx;
				text-align: right;
				margin-right: 25rpx;
			}
		}
	}
	.finish{
		@include flex;
		justify-content: space-between;
		padding: 0rpx 0rpx 30rpx;
		.finish-item{
			background-color: $color-bgs;
			padding: 0rpx 40rpx;
			border-radius: 16rpx;
			font-size: 28rpx;
			line-height: 80rpx;
		}
		.show{
			background-color: $light-color;
			color: #fff;
		}
	}
	.finish-body{
		padding: 20rpx;
		.body-title{
			font-weight: bold;
			font-size: 32rpx;
			line-height: 80rpx;
		}
		.body-center{
			color: $color-fu;
			font-size: 28rpx;
			margin-bottom: 30rpx;
		}
	}
</style>
